<template>
  <ul class="nav">
    <li
      v-for="(item, index) in list"
      :key="index"
      @click="change(item, index)"
      :class="{ active: index == flag }"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";

export default {
  props: {
    list: Array,
    modelValue: Number,
  },
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      flag: 0,
    });
    const change = (item, index) => {
      data.flag = index;

      ctx.emit("update:modelValue", item.id);
      //更新v-model 绑定的那个select（传过来之后默认叫modelValue）的值
    };
    return { ...toRefs(data), change };
  },
};
</script>

<style lang="scss" scoped>
.nav {
  width: 20%;
  li {
    height: 40px;
    width: 100%;
    text-align: center;
    line-height: 40px;
    border-left: 2px solid #fff;
  }
  .active {
    border-left: 2px solid rgb(136, 34, 34);
  }
}
</style>
